<!-- 
  侦听器
    监视响应式数据的变化，当数据变化之后，执行DOM操作或者异步操作
    但是，当被监听的对象结构过于复杂时，可能无法监视到，此时需要用到深度侦听
    需要注意的是，深度侦听需要遍历被侦听对象中所有嵌套的属性，当用于大型数据结构时，性能开销很大
-->
<script setup>
  import {ref, watch} from "vue"
  const num = ref(0)

  const student = ref({
    name: "careathers",
    age: 18,
    action: {
      study: () => {
        console.log("好好学习，天天向上！")
      },
      reading: () => {
        console.log("为自己需要做的事情付出百分之百的专注！")
      }
    }
  })

  // 使用侦听器监视num
  watch(num, (newVal) => {
    console.log(newVal)
  })

  // 使用侦听器监视student
  // -- 直接使用跟普通的侦听器，无法检测内部的内容变更
  // -- 需要启用深度侦听
  watch(student, (newVal) => {
    console.log(newVal)
  }, 
  {
    deep: true
  })
</script>

<template>
  <div>
    <p>{{ num }}</p>
    <button @click="num++">num +1</button>
    <hr>
    <p>姓名：{{ student.name }}</p>
    <p>年龄：{{ student.age }}</p>
    <button @click="student.age ++">年龄 +1</button>
  </div>
</template>

<style scoped>

</style>